<template>
  <!-- 接收 src 属性，指渲染的图片地址 -->
  <el-image :src="src" class="img-container">
    <!-- 当 el-image 组件接收的 src 地址渲染失败，或者不存在图片时，会走 error 插槽 -->
    <template slot="error" class="image-slot">
      <!-- 如果解析失败，地址不存在，渲染默认的图片 -->
      <!-- 图片采用就近原则， 直接从当前目录下引用即可，为了以后方便进行复用 -->
      <img src="./img.jpeg" alt="">
    </template>
  </el-image>
</template>

<script>
export default {
  name: 'ImageHolder',
  props: {
    src: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.img-container {
  border-radius: 50%;

  img {
    width: 100%;
  }
}
</style>
